// echarts数据
import * as echarts from 'echarts'
 // 地图
export const mapOption = {
    tooltip: {
      trigger: 'item'
    },

    layoutCenter: ['50%', '60%'], // 位置
    layoutSize: '95%', // 大小
    textStyle: {
      color: '#21a44c',
      fontSize: '13'
    },
    // 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
    // 要显示散点图，必须填写这个配置
    geo: {
      zoom: 1.1,
      show: true,
      roam: true, // 是否允许鼠标滚动放大，缩小
      map: 'china',
      label: { // 图形上的文本标签，可用于说明图形的一些数据信息
        show: true, // 是否显示文本
        color: '#035270', // 文本颜色
      },
      itemStyle: { // 地图区域的多边形 图形样式。 默认样试。
        areaColor: '#19ccd5', // 地图区域的颜色。
        borderColor: '#fff' // 边框线
      },
      emphasis: { // 高亮状态下的多边形和标签样式。
        label: { // 文本
          color: '#ADA'
        },
        itemStyle: { // 区域
          areaColor: '#028e98'
        }
      },
      scaleLimit: { min: 0, max: 3 }, // 缩放级别
      regions: [
        {
          name: '南海诸岛',
          value: 0,
          itemStyle: {
            normal: {
              opacity: 0,
              label: {
                show: false
              }
            }
          }
        }
      ]
    },
    series: [
      {
        type: 'effectScatter', // 样试
        coordinateSystem: 'geo', // 该系列使用的坐标系
        data: [ // 数据
          { name: '宜昌', value: [111.3, 30.7, 330] },
          { name: '信阳', value: [114.089435, 32.167686, 440] }
        ],
        itemStyle: { // 样试。
          normal: { // 默认样试
            color: '#ff5a00'
          }
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          }
        },
        // 标记的大小,可以设置数组或者函数返回值的形式
        symbolSize: function (val) {
          return val[2] / 34
        },
        rippleEffect: { // 涟漪特效相关配置。
          brushType: 'stroke' // 波纹的绘制方式
        },
        encode: {
          value: 2
        },
        hoverAnimation: true // 鼠标移入放大圆
      }
    ]
}
// 文章分类 - 饼图
export const classifyOption = {
    tooltip: {
      trigger: 'item',
      position: 'right',
      formatter: ' {c}篇  <br/> {d}%'
    },
    series: [
      {
        name: '文章分类',
        type: 'pie',
        center:['45%','50%'],
        radius: ['15%', '85%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 2
        },
        label: {
          normal:{
            show:true,
            position:'inner', //标签的位置
            textStyle : {
                fontWeight :200 ,
                color:'#fff',
                fontSize : 10    //文字的字体大小
            },
            formatter:'{b}'
          }
        },

        labelLine: {
            show: false
        },
        data: [
            {value: 1048, name: '小程序'},
            {value: 735, name: 'node'},
            {value: 580, name: 'Vue'},
            {value: 484, name: '移动端'},
            {value: 300, name: '其他'}
        ]
      }
    ]
}
 // 用户城市分布 - 柱状图
export const cityBarOption= {
  tooltip: {
    trigger: 'item',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    // 距离 上右下左 的距离
    top: '20%',
    right: '3%',
    bottom: '0%',
    left: '0%',
    // 是否包含文本
    containLabel: true,
    // 显示边框
    show: true,
    // 边框颜色
    borderColor: 'rgba(0, 240, 255, 0.3)'
  },

  xAxis: [
    {
      // 使用类目，必须有data属性
      type: 'category',
      // 使用 data 中的数据设为刻度文字
      data: ['上海', '广州', '北京', '深圳', '合肥', '杭州', '厦门', '济南', '成都', '重庆'],
      // 刻度设置
      axisTick: {
        // true意思：图形在刻度中间
        // false意思：图形在刻度之间
        alignWithLabel: true,
        alignWithLabel: false,
        show: false
      },
      // 文字
      axisLabel: {
        color: '#4c9bfd'
      }
    }
  ],
  yAxis: [
    {
      // 使用数据的值设为刻度文字
      type: 'value',
      // 刻度设置
      axisTick: {
        show: false
      },
      // 文字
      axisLabel: {
        color: '#4c9bfd'
      },
      splitLine: {
        lineStyle: {
        color: 'rgba(0, 240, 255, 0.3)'
        }
      }
    }
  ],
  series: [
    {
      name: '直接访问',
      type: 'bar',
      barWidth: '40%',
      data: [2100,1900,1700,1560,1400,900,750,600,480,240],
      itemStyle: {
        // 提供的工具函数生成渐变颜色
        color: new echarts.graphic.LinearGradient(
          // (x1,y2) 点到点 (x2,y2) 之间进行渐变
          0, 0, 0, 1,
          [
            {offset: 0, color: '#00f1f7'}, // 0 起始颜色
            {offset: 1, color: '#0067d0'}  // 1 结束颜色
          ]
        )
      }
    }
  ]
}
// 平台访问率统计 - 饼图
export const paasVisitPieOption = {
  tooltip: {
    trigger: 'item',
    position: 'right',
    formatter: ' {c}人  <br/> {d}%'
  },
  series: [
    {
      name: '平台分类',
      type: 'pie',
      center:['45%','50%'],
      radius: ['15%', '85%'],
      avoidLabelOverlap: false,
      itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
      },
      label: {
        normal:{
          show:true,
          position:'inner', //标签的位置
          textStyle : {
              fontWeight :200 ,
              color:'#fff',
              fontSize : 10    //文字的字体大小
          },
          formatter:'{b}'
        }
      },

      labelLine: {
          show: false
      },
      data: [
          {value: 1048, name: '管理系统'},
          {value: 735, name: 'blog平台'},
          {value: 580, name: '小程序'}
      ]
    }
  ]
}
// 月度访问统计 - 折线图
export const monthlyLineOption = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisTick: {
      show: false // 去除刻度线
    },
    axisLabel: {
      color: '#4c9bfd' // 文本颜色
    },
    axisLine: {
      show: false // 去除轴线
    },
    boundaryGap: false  // 去除轴内间距
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false  // 去除刻度
    },
    axisLabel: {
      color: '#4c9bfd' // 文字颜色
    },
    splitLine: {
      lineStyle: {
        color: '#012f4a' // 分割线颜色
      }
    }
  },
  series: [{
    name:'预期访问数量',
    data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
    type: 'line',
    smooth: true,
    itemStyle: {
      color: '#00f2f1'  // 线颜色
    }
  },{
    name:'实际访问量',
    data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    type: 'line',
    smooth: true,
    itemStyle: {
      color: '#ed3f35'  // 线颜色
    }
  }],
    // 设置网格样式
  grid: {
    show: true,// 显示边框
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    borderColor: '#012f4a',// 边框颜色
    containLabel: true // 包含刻度文字在内
  },
  legend: {
    textStyle: {
      color: '#4c9bfd' // 图例文字颜色
        //  fontSize
    },
    right: '0%' // 距离右边10%
  },
}
